<template>
  <el-pagination
      v-model:currentPage="props.data.current"
      v-model:page-size="props.data.pageSize"
      :page-sizes="props.data.pageSizes"
      :total="props.data.total"
      :small="props.small"
      :background="props.background"
      :disabled="props.disabled"
      @size-change="sizeChange"
      @current-change="currentChange"
      layout="total, sizes, prev, pager, next, jumper"
  />
</template>

<script setup lang="ts">
import {PropType} from "vue";
import {paginationTypes} from "./types";

const props = defineProps({
  data: {
    type: Object as PropType<paginationTypes>,
    required: true
  },
  small: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  background: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  disabled: {
    type: Boolean as PropType<boolean>,
    default: false
  }
});

// 改变页面大小
const sizeChange = (val: number) => {
}

// 改变当前页
const currentChange = (val: number) => {
}
</script>

<style scoped lang="scss">

</style>